<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>传参页面</title>
</head>



<body>
    <div id="app">
        {{message}}
        <hr>
        插槽
        <slot-com>
            <p>default slot</p>
            <p>default slot</p>
            <p>default slot</p>
            <template #slot1>slot1</template>
            <template #slot2="{msg}">
                <p>{{msg}}</p>
            </template>
            <!-- 动态插槽 -->
            <template #[apple]>
                <p>我是动态插槽</p>
            </template>
        </slot-com>
        <hr>
        props and emit
        <div>
            {{num}}
            <prop-com :father-name="fatherName" @add-number="addNumber"></prop-com>
        </div>


        <hr>
        自定义指令
        自动focus
        <input v-focus type="text" />
        <hr>
        
    </div>
    <template id="slotCom">
        <!-- 原始方式 -->
        <!-- <div>我是插槽
            <slot></slot>
        </div> -->

    </template>

    <template id="propCom">
        <div>
            获取父组件名字:{{fatherName}}
            <button @click="onClick">父组件的数字+1</button>
        </div>
    </template>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const { createApp, toRefs,createElementVNode } = Vue
        var slotCom = {
            template: '#slotCom',
            setup(props,context){
                let {slots} = context
                const _default = slots.default()
                const _slot1 = slots.slot1()
                const _slot2 = slots.slot2({msg:'hello'})
                const _iphone = slots.iphone()
                console.log(slots)
                return ()=>{
                    return createElementVNode('div',null,[
                        ..._default,..._slot1,..._slot2,..._iphone
                    ])
                }
            }
        }
        var propCom = {
            template: '#propCom',
            props: ['fatherName'],
            setup(props, context) {
                let { fatherName } = toRefs(props);
                console.log(fatherName.value)
                let { emit } = context

                function onClick() {
                    emit('add-number', 1)
                }
                return {
                    onClick
                }
            }

        }

        // 手写promise
        const PENDING = 'pending'
        const FULFILLED = 'fulfilled'
        const REJECTED = 'rejected'
        class myPromise {
            #static = 'pending'
            #result = undefined
            #changeStatic(static1, result) {
                if (this.#static !== PENDING) return;
                this.#static = static1
                this.#result = result
                // console.log(static1,result)
            }
            
            constructor(executor) {
                const resolve = (data) => {
                    this.#changeStatic(FULFILLED, data)
                }
                const reject = (reason) => {
                    this.#changeStatic(REJECTED, reason)
                }
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
        }
        const p = new myPromise((resolve,reject)=>{
           reject(1)
        })
        const p1 = new Promise((resolve,reject)=>{
           resolve(123)
        })
        // console.log(p.result)
        // console.log(p1)
        // var let const 

        // {
        //     console.log(a)  //cannot access 'a' before initialization
        //     let a =1;
        //     console.log(a)  //1

        // }
        // console.log(a)  // a is not defined
        // var a =1 
        // var a = 2
        // {
        //     var a =6
        // }
        // console.log(a)

       
        
        createApp({
            data() {
                return {
                    message: 'hello wrold',
                    fatherName: '老谭',
                    num: 0,
                    apple:'iphone'
                }
            },
            methods: {
                addNumber(val) {
                    this.num = this.num + val
                }
            },
            components: {
                slotCom,
                propCom
            },
            directives: {
                focus: {
                    mounted(el) {
                        el.focus()
                    }
                }
            },
            
        }).mount('#app')
    </script>
</body>

</html>